<template>
  <div class="book-table-container">
    <table class="book-table" v-if="books.length > 0">
      <thead>
      <!-- 使用插槽接收表头内容 -->
      <slot name="header"></slot>
      </thead>
      <tbody>
      <tr v-for="(book, index) in books" :key="book.id">
        <td>{{ index + 1 }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.price.toFixed(2) }}</td>
        <td>
          <input
              type="number"
              v-model.number="book.count"
              min="1"
              class="count-input"
          />
        </td>
        <td>{{ (book.price * book.count).toFixed(2) }}</td>
        <td>
          <button
            class="delete-btn"
            @click="$emit('delete', book.id)"
          >
            删除
          </button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'BookTable',
  // 接收图书数组作为props
  props: {
    books: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.book-table-container {
  overflow-x: auto;
}

.book-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.book-table th,
.book-table td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: center;
}

.book-table thead {
  background-color: #f2f2f2;
}

.book-table tbody tr:hover {
  background-color: #f5f5f5;
}

.count-input {
  width: 60px;
  padding: 5px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>